<template>
    <div class="directory-container">
        <div class="w-[15rem] p-[1rem] pb-[1.25rem] bg-[#fff] rounded-[1rem] shadow-[0px_2px_8px_0px_#0000001A]">
            <div class=" flex items-center justify-between" :class="{ 'pb-[0.875rem]': isExpanded }" :style="{ borderBottom: isExpanded ? '1px solid #E5E7EB' : 'none' }">
                <div class="font-bold text-[16px] leading-[24px]">目录</div>
                <div class="cursor-pointer flex items-center justify-center" @click="toggleExpand">
                    <el-icon :size="16" class="text-[#6B7280]">
                        <ArrowDown v-if="isExpanded" />
                        <ArrowRight v-else />
                    </el-icon>
                </div>
            </div>
            <div v-show="isExpanded" class="transition-all duration-300 mt-[0.75rem]">
                <div 
                    v-for="item in directoryList" 
                    :key="item.id" 
                    class="h-[2.5rem] p-[0.5rem] rounded-[0.5rem] text-[14px] leading-[20px] cursor-pointer flex items-center" 
                    :class="current === item.id ? 'bg-[#F3F4F6] text-[#2563EB]!' : ''" 
                    @click="handleClick(item.id)"
                >
                    {{ item.name }}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ArrowDown, ArrowRight } from '@element-plus/icons-vue'

const current = ref(1);
const isExpanded = ref(true);

const directoryList = ref([
    {
        name: '引言',
        id: 1
    },
    {
        name: '学习方法',
        id: 2
    },
    {
        name: '实践建议',
        id: 3
    },
    {
        name: '总结',
        id: 4
    }
])

const handleClick = (id: number) => {
    console.log(id)
    current.value = id
}

const toggleExpand = () => {
    isExpanded.value = !isExpanded.value;
}
</script>

<style scoped>
.directory-container {
    position: sticky;
    top: 1rem;
    height: fit-content;
    z-index: 10;
}
</style>